<template>
  <div>
    <!-- 筛选条件 -->
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="工单号">
          <el-input v-model="form.docNo" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="生产状态">
          <el-select v-model="form.status" placeholder="" clearable>
            <el-option
              v-for="item in workOrderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车间">
          <el-select v-model="form.workshop" placeholder="" clearable>
            <el-option
              v-for="item in workshopList"
              :key="item.value"
              :label="item.workshopName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产线">
          <el-select v-model="form.line" placeholder="" clearable>
            <el-option
              v-for="item in productionLineList"
              :key="item.value"
              :label="item.realityLineName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div class="table">
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @on-search="onSearch"
        @on-reset="onReset"
      >
        <template slot="menu" slot-scope="scope">
          <el-button type="text" @click="editSchedule(scope.row)"
            >编辑排程</el-button
          >
        </template>
      </avue-crud>
    </div>

    <!-- 排产对话框 -->
    <el-dialog
      title="排产"
      :visible.sync="planDialogVisible"
      width="100%"
      fullscreen
      append-to-body
    >
      <div>
        <plan :orderId="orderId" :planDialogVisible="planDialogVisible"></plan>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="planDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="planDialogVisible = false"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import plan from "./plan.vue";
import { workshop, lineList } from "@/api/common";
import { remote } from "@/api/admin/dict";
import { fetchList } from "@/api/workorder/workorderschedulemain";
import {filterEmptyValues} from "@/util/util";
export default {
  data() {
    return {
      form: {
        docNo: "",
        status: "",
        workshop: "",
        line: "",
      },
      tableData: [],
      tableOption: {
        index: true,
        indexLabel: "序号",
        border: true,
        stripe: true,
        menu: true,
        align: "center",
        addBtn: false, // 不显示新增
        editBtn: false, // 不显示编辑
        delBtn: false, // 不显示删除
        page: true, // 关键点：必须加上

        column: [
          // { label: "序号", type: "index", width: 60 },
          { label: "工单号", prop: "docNo" },
          { label: "品号", prop: "itemCode" },
          { label: "生产状态", prop: "moStatus", slot: true },
          { label: "车间", prop: "workshopName" },
          { label: "产线", prop: "lineName" },
          { label: "产线排产数量", prop: "planQty" },
          { label: "产线日排数量", prop: "alreadyQty" },
          { label: "产线待排数量", prop: "waitQty" },
        ],
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },

      planDialogVisible: false,
      workshopList: [],
      productionLineList: [],
      workOrderStatusList: [],
      orderId: "",
    };
  },
  components: {
    plan, // 引入排产组件
  },
  mounted() {
    this.getWorkshopLists();
    this.getLineLists();
    this.getWorkOrderStatus();
    this.getData();
  },
  methods: {
    getWorkOrderStatus() {
      remote("workorder_status").then((response) => {
        this.workOrderStatusList = response.data.data;
        console.log(response.data.data);
        
      });
    },
    getWorkshopLists() {
      workshop().then((res) => {
        this.workshopList = res.data.data.records;
      });
    },
    getLineLists() {
      lineList().then((res) => {
        this.productionLineList = res.data.data.records;
      });
    },

    onSearch() {
      // 这里可以调用API或者emit事件
      console.log("查询参数：", this.form);
      // 例如：this.$emit('search', this.form)
      this.page.currentPage = 1;
      this.getData();
    },
    onReset() {
      this.form = {
        docNo: "",
        status: "",
        workshop: "",
        line: "",
      };
      this.getData();
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page.currentPage = page;
      this.getData();
    },
    getData() {
      let data = {
        current: this.page.currentPage,
        size: this.page.pageSize,
        docNo: this.form.docNo,
        moStatus: this.form.status,
        workshopId: this.form.workshop,
        lineId: this.form.line,
      };

      fetchList(data).then((res) => {
        if (res) {
          this.tableData = res.data.data.records;
          this.page.total = res.data.data.total;
        }
      });
    },
    editSchedule(row) {
      this.orderId = row.id;
      this.planDialogVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
.demo-form-inline {
  display: flex;
  align-items: center;
}
.demo-form-inline .el-form-item {
  margin-right: 10px;
}
.search {
  margin: 0 10px 10px 10px;
  padding: 10px;
  background-color: #fff;
}
.table {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
}
</style>
